<template>
  <BasePage title="上报记录" description="查看您提交的所有上报记录">
    <!-- 筛选条件 -->
    <div class="mb-4 p-4 bg-white rounded-lg shadow-sm">
      <div class="grid grid-cols-2 gap-3">
        <div class="form-group">
          <label class="form-label text-sm">开始日期</label>
          <input type="date" v-model="filters.startDate" class="form-input" />
        </div>
        <div class="form-group">
          <label class="form-label text-sm">结束日期</label>
          <input type="date" v-model="filters.endDate" class="form-input" />
        </div>
      </div>
      <div class="form-group mt-2">
        <label class="form-label text-sm">状态</label>
        <select v-model="filters.status" class="form-input">
          <option value="">全部状态</option>
          <option value="pending">待审核</option>
          <option value="approved">已通过</option>
          <option value="rejected">已驳回</option>
        </select>
      </div>
      <button 
        @click="searchRecords" 
        class="w-full mt-3 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
      >
        查询
      </button>
    </div>
    
    <!-- 记录列表 -->
    <BaseList 
      :items="records" 
      :loading="loading" 
      :has-more="hasMore" 
      empty-text="暂无上报记录"
      @load-more="loadMore"
    >
      <template #item="{ item }">
        <div class="record-item">
          <div class="flex justify-between items-start mb-2">
            <div>
              <div class="font-medium text-gray-800">{{ item.title }}</div>
              <div class="text-sm text-gray-500">{{ item.date }}</div>
            </div>
            <div :class="getStatusClass(item.status)" class="px-2 py-1 rounded-full text-xs font-medium">
              {{ getStatusText(item.status) }}
            </div>
          </div>
          <div class="text-sm text-gray-600">
            <div class="mb-1"><span class="text-gray-500">上报类型：</span>{{ item.type }}</div>
            <div><span class="text-gray-500">上报人数：</span>{{ item.count }}人</div>
          </div>
        </div>
      </template>
    </BaseList>
  </BasePage>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseList from '../../components/BaseList.vue';

// 筛选条件
const filters = ref({
  startDate: '',
  endDate: '',
  status: ''
});

// 记录列表
const records = ref([]);
const loading = ref(false);
const hasMore = ref(false);
const page = ref(1);

// 获取状态样式
const getStatusClass = (status) => {
  const classes = {
    pending: 'bg-yellow-100 text-yellow-800',
    approved: 'bg-green-100 text-green-800',
    rejected: 'bg-red-100 text-red-800'
  };
  return classes[status] || 'bg-gray-100 text-gray-800';
};

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已驳回'
  };
  return texts[status] || '未知状态';
};

// 搜索记录
const searchRecords = async () => {
  loading.value = true;
  page.value = 1;
  
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 800));
    
    // 模拟数据
    records.value = generateMockRecords(10);
    hasMore.value = records.value.length >= 10;
  } finally {
    loading.value = false;
  }
};

// 加载更多
const loadMore = async () => {
  if (loading.value) return;
  
  loading.value = true;
  page.value += 1;
  
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 800));
    
    // 模拟数据
    const moreRecords = generateMockRecords(5);
    records.value = [...records.value, ...moreRecords];
    hasMore.value = page.value < 3; // 模拟只有3页数据
  } finally {
    loading.value = false;
  }
};

// 生成模拟记录
const generateMockRecords = (count) => {
  const types = ['日常健康上报', '疫情防控上报', '心理健康上报', '安全教育上报'];
  const statuses = ['pending', 'approved', 'rejected'];
  
  return Array.from({ length: count }, (_, i) => {
    const date = new Date();
    date.setDate(date.getDate() - Math.floor(Math.random() * 30));
    
    return {
      id: `report-${Date.now()}-${i}`,
      title: `${types[Math.floor(Math.random() * types.length)]}`,
      date: date.toLocaleDateString('zh-CN'),
      type: types[Math.floor(Math.random() * types.length)],
      count: Math.floor(Math.random() * 100) + 10,
      status: statuses[Math.floor(Math.random() * statuses.length)]
    };
  });
};

// 初始加载
onMounted(() => {
  searchRecords();
});
</script>